<template>
  <view class="app-container ver-layout">
    <!-- 上传照片   -->
    <view class="photo-layout hor-layout-center" @click="uploadImage">
      <view class="photo-view ver-layout-center-all">
        <u-icon v-if="!form.image" name="camera" color="#999999" size="50"></u-icon>
        <image v-else :src="form.image" class="photo-image"/>
      </view>
      <view class="upload-view">上传照片</view>
    </view>
    <!-- 其他信息   -->
    <u-form :model="form" ref="uForm" label-width="97px" :label-style="formLabel">
      <u-form-item label="姓 名">
        <u-input v-model="form.realname" placeholder="请输入教师姓名"/>
      </u-form-item>
      <u-form-item label="性 别">
        <u-radio-group v-model="form.sex">
          <u-radio v-for="(item, index) in radioList" :key="index" :name="item.value" active-color="#42B4AB">
            {{ item.name }}
          </u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item label="年 龄">
        <u-input v-model="form.age" type="number" placeholder="请输教师年龄" maxlength="3"/>
      </u-form-item>
      <u-form-item label="联系电话">
        <u-input v-model="form.phone" type="number" placeholder="请输入联系电话" maxlength="11"/>
      </u-form-item>
      <u-form-item label="身份证号">
        <u-input v-model="form.id_card" type="idcard" placeholder="请输入身份证号码" maxlength="20"/>
      </u-form-item>
      <u-form-item label="专业">
        <view class="form-select-item hor-layout-center" @click="form.showMajor=true">
          <view class="form-select-text">{{ form.majorObj.label ? form.majorObj.label : '请选择' }}</view>
          <u-icon name="arrow-right" color="#000000"></u-icon>
        </view>
        <u-select v-model="form.showMajor" :list="majorList" title="选择专业"
                  :default-value="form.majorObj.value" @confirm="confirmSelectMajor"></u-select>
      </u-form-item>
      <u-form-item label="入职时间">
        <view class="form-select-item hor-layout-center" @click="form.showTime=true">
          <view class="form-select-text">{{ form.entry_time ? form.entry_time : '请选择' }}</view>
          <u-icon name="arrow-right" color="#999999"></u-icon>
          <u-picker v-model="form.showTime" :params="timePara" :default-time="form.entry_time"
                    title="选择开课时间" @confirm="selectTime"></u-picker>
        </view>
      </u-form-item>
      <u-form-item label="基础工资">
        <u-input v-model="form.basepay" placeholder="请输入基础工资"/>
      </u-form-item>
      <u-form-item label="绩效提成">
        <u-input v-model="form.fixedamount" placeholder="请输入绩效提成(%)"/>
      </u-form-item>
      <u-form-item label="教师介绍">
        <u-input v-model="form.introduction" type="textarea" border placeholder="请输入教师介绍"/>
      </u-form-item>
      <u-form-item label="状 态">
        <view class="form-select-item hor-layout-center">
          <view class="form-select-text"></view>
          <u-switch v-model="form.statusChecked" active-color="#42B4AB" size="35" @change="changeStatus"></u-switch>
        </view>
      </u-form-item>
    </u-form>
    <view class="submit-view" @click="saveTeacherInfo">保存</view>
  </view>
</template>

<script>
import uploadFile from '@/common/ossutil/uploadFile.js'
import {teacher, teacherInfo} from "@/router.js"
import {AddTeacherApi} from "@/api/teacherManage.js"

let engine = new AddTeacherApi()
export default {
  name: "addTeacher",
  data() {
    return {
      timePara: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false
      },
      formLabel: {
        color: "#282828",
        fontSize: '15px',
        textAlign: 'justify',
        textAlignLast: 'justify',
        display: 'inline-block',
        paddingRight: '27px'
      },
      form: {
        avatar: '11',
        image: '',//图片路径
        realname: '',
        sex: '',
        age: '',
        majors: '',
        majorObj: {},
        phone: '',
        id_card: '',
        entry_time: '',
        basepay: '',
        fixedamount: '',
        introduction: '',
        status: 0,
        showMajor: false,
        showTime: false,
        statusChecked: false
      },
      majorList: [],
      radioList: [{name: "男", value: 1}, {name: "女", value: 2}],
    }
  },
  onLoad(options) {
    if (this.options.teacher_id) {
      let {major, major_name} = options
      let majorObj = {label: major_name, value: [major.toString()]}
      this.form = {...this.form, ...options, majorObj, majors: major}
      uni.setNavigationBarTitle({title: '修改教师信息'})
    }
    this.getMajorList()
  },
  methods: {
    getMajorList() {
      engine.getMajorList().then(res => {
        this.majorList = res.data.map(item => {
          return {value: item.id, label: item.name}
        })
      })
    },
    changeStatus(e) {
      this.form.status = e ? 1 : 0
    },
    confirmSelectMajor(e) {
      let channelIndex = this.majorList.findIndex(item => item.value === e[0].value)
      this.form.majorObj.value = [channelIndex]
      this.form.majorObj.label = e[0].label
      this.form.majors = e[0].value.toString()
    },
    selectTime(e) {
      this.form.entry_time = ''
      let {year, month, day, hour, minute, second} = this.timePara
      if (year) this.form.entry_time += e.year;
      if (month) this.form.entry_time += '-' + e.month;
      if (day) this.form.entry_time += '-' + e.day;
      if (hour) this.form.entry_time += ' ' + e.hour;
      if (minute) this.form.entry_time += ':' + e.minute;
      if (second) this.form.entry_time += ':' + e.second;
    },
    saveTeacherInfo() {
      if (this.form.teacher_id) {
        engine.updateTeacher(this.form).then(res => {
          if (res.code === 200) {
            this.$u.toast("修改成功！")
            this.$u.pageCallBackDelay(teacher, 'refreshData', '')
            this.$u.pageCallBackDelay(teacherInfo, 'getTeacherDetail', '')
            this.$u.routeDelay({type: 'navigateBack'})
          }
        })
      } else {
        engine.addTeacher(this.form).then(res => {
          if (res.code === 200) {
            this.$u.toast("添加成功！")
            this.$u.pageCallBackDelay(teacher, 'refreshData', '')
            this.$u.routeDelay({type: 'navigateBack'})
          }
        })
      }
    },
    uploadImage() {
      uni.chooseImage({count: 1}).then(res => {
        let path = res[1].tempFilePaths[0],
            file = res[1].tempFiles[0]
        uploadFile(path, file, (f_name, r_path) => {
          console.log("uploadFile", f_name, r_path)
          this.form.image = r_path
          this.saveImg(f_name)
        }, (err) => {
          this.$u.toast("上传错误！")
          console.error("uploadFile", err)
        })
      })
    },
    saveImg(path) {
      engine.saveResource(path).then(res => {
        this.form.avatar = res.data[0];
      }).catch(err => this.$u.toast(err.message))
    }
  }
}
</script>

<style scoped>
.photo-layout {
  padding-bottom: 25rpx;
  border-bottom: 1px solid #E5E5E5;
}

.photo-view {
  width: 118rpx;
  height: 146rpx;
  background: #D1D1D1;
}

.upload-view {
  margin-left: 50rpx;
  font-size: 30rpx;
  color: #333333;
  font-family: Source Han Sans CN;
}

.form-select-item {
  width: 100%;
}

.form-select-text {
  flex: 1;
  width: 0;
  margin-right: 3px;
  text-align: right;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
}

.submit-view {
  margin: auto;
  margin-top: 15px;
  height: 36px;
  line-height: 36px;
  width: 70%;
  text-align: center;
  background: #42B4AB;
  border-radius: 18px;
  /* 文本样式 */
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
}
</style>
